<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    // 获取当前浏览器支持的transform兼容写法
    function getTransform() {   
        var transform = '',
            divStyle = document.createElement('div').style,
            // 可能涉及到的几种兼容性写法，通过循环找出浏览器识别的那一个
            transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],

            i = 0,
            len = transformArr.length;

        for(; i < len; i++)  {
            if(transformArr[i] in divStyle) {
                // 找到之后立即返回，结束函数
                return transform = transformArr[i];
            }
        }

        // 如果没有找到，就直接返回空字符串
        return transform;
    };

    //传入参数，1参是元素，二参是
    function getStyle(elem, property) {
        // ie通过currentStyle来获取元素的样式，其他浏览器通过getComputedStyle来获取
        //@@@style不仅可以获取值，还能设置。currentStyle只能获取，这里是为了获取currentStyle值。
        return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];
    }
    //@@@该函数是为了获取目标元素初始位置
    function getTargetPos(elem) {
        var pos = {x: 0, y: 0};
        var transform = getTransform();//获取到兼容性方法
        if(transform) {//如果存在
            var transformValue = getStyle(elem, transform);//获取transform值
            if(transformValue == 'none') {//没有
                elem.style[transform] = 'translate(0, 0)';
                return pos;
            } else {
                var temp = transformValue.match(/-?\d+/g);//有
                return pos = {
                    x: parseInt(temp[4].trim()),
                    y: parseInt(temp[5].trim())
                }
            }
        } else {
            if(getStyle(elem, 'position') == 'static') {
                elem.style.position = 'relative';
                return pos;
            } else {
                var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0);
                var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);
                return pos = {
                    x: x,
                    y: y
                }
            }
        }
    }    
    //不停设置目标元素的新位置。【比如传入了pos值，控制阶段值】

    // pos = { x: 200, y: 100 }
    function setTargetPos(elem, pos) {
        var transform = getTransform();
        if(transform) {
            elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)';
        } else {
            elem.style.left = pos.x + 'px';
            elem.style.top = pos.y + 'px';
        }
        return elem;
    }
</script>
</body>
</html>